<template>
  <div class="page">
    <!-- <audio loop="false">
      <source :src="openVoice" id="music" type="audio/mp3" />
    </audio> -->

    <img
      :class="!open ? 'openDoor1_close' : 'openDoor1_open'"
      :src="doorImg1"
      alt=""
    />
    <img
      :class="!open ? 'openDoor2_close' : 'openDoor2_open'"
      :src="doorImg2"
      alt=""
    />
    <div
      class="openBtn"
      v-if="!open"
      :style="{ opacity: `${(clickTime / 10) * 3.5}` }"
      @mousedown="openDoor"
      @mouseup="stopOpen"
    ></div>
    <span v-if="!open" class="welcomeWord"><em>Welcome Inside</em></span>
    <span v-if="!open" class="tips"><span>⬆️</span>摁住，坚持五秒</span>
    <t-form
      :data="formData"
      ref="form"
      @reset="onReset"
      @submit="onSubmit"
      :colon="true"
      :labelWidth="0"
      class="loginArea"
      :style="{ animation: !open ? 'loginMove ease-out 2s forwards' : '' }"
    >
      <t-form-item name="account">
        <t-input
          clearable
          v-model="formData.account"
          :placeholder="
            lastLoginName ? `上次登录人：${lastLoginName}` : '请输入用户名'
          "
        >
          <desktop-icon slot="prefix-icon"></desktop-icon>
        </t-input>
      </t-form-item>
      <t-form-item name="password">
        <t-input
          type="password"
          clearable
          v-model="formData.password"
          placeholder="请输入密码"
        >
          <lock-on-icon slot="prefix-icon"></lock-on-icon>
        </t-input>
      </t-form-item>
      <t-form-item>
        <t-button
          type="reset"
          variant="outline"
          theme="primary"
          style="margin-right: 20px"
          >重置</t-button
        >
        <t-button
          style="width: 100%"
          theme="primary"
          type="submit"
          :loading="loginLoading"
          :disabled="loginLoading"
          >登录</t-button
        >
      </t-form-item>
    </t-form>
  </div>
</template>
<script>
import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
// import * as api from "../../services/api";

export default {
  destroyed() {
    clearInterval(this.openTimer);
  },
  components: {
    DesktopIcon,
    LockOnIcon,
  },
  data() {
    return {
      openVoice: require("../../assets/open2.mp3"),
      open: false,
      openTimer: "",
      clickTime: 0,
      doorImg1: require("../../assets/door1.png"),
      doorImg2: require("../../assets/door2.png"),
      lastLoginName: localStorage.getItem("userName"),
      loginLoading: false,
      formData: {
        account: "",
        password: "",
      },
      reqKeyWord: {
        // 查询头像参数
        q: "",
      },
    };
  },

  methods: {
    playAudio(type, url) {
      const audio = new Audio(url);
      audio.src = url;
      audio.volume = 1;
      if (type == "play") {
        audio.play();
      } else if (type == "pause") {
        audio.pause();
      }
      return audio;
    },
    openDoor() {
      this.clickTime = 1;
      this.openTimer = setInterval(() => {
        this.clickTime += 0.2;
        if (this.clickTime > 5) {
          this.playAudio("play", this.openVoice);
          this.open = true;
          clearInterval(this.openTimer);
        }
      }, 200);
    },
    stopOpen() {
      if (this.clickTime > 5) {
        this.open = false;
        clearInterval(this.openTimer);
      } else {
        this.clickTime = 0;
        clearInterval(this.openTimer);
      }
    },
    onReset() {
      this.$message.success("重置成功");
    },
    onSubmit({ validateResult, firstError }) {
      const {
        formData: { account, password },
        reqKeyWord,
      } = this;
      reqKeyWord.q = account;
      // loading 和 disable 开启
      this.loginLoading = true;
      if (validateResult === true) {
        if (typeof account == "string" && password === "123456") {
          sessionStorage.setItem("token", password);
          localStorage.setItem("userName", account);
          this.$router.push({
            path: "/firstpage",
            query: {},
          });
          this.loginLoading = false;
        } else {
          this.$message.error("请检查您输入的信息");
          this.loginLoading = false;
        }
      } else {
        console.log("Errors: ", validateResult);
        this.$message.warning(firstError);
        this.loginLoading = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/login_bgimg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .welcomeWord {
    user-select: none;
    position: absolute;
    z-index: 9999;
    top: 2%;
    font-size: 70px;
    font-weight: bolder;
    text-shadow: 2px 2px 1px red;
  }
  .tips {
    user-select: none;
    position: absolute;
    z-index: 9999;
    bottom: 30%;
    font-size: 33px;
    font-weight: bolder;
    text-shadow: 2px 2px 1px red;
    animation: tip 5s ease-in-out infinite;
  }
  .openDoor1_close {
    left: 0px;
  }
  .openDoor2_close {
    right: 0px;
  }
  .openDoor1_close,
  .openDoor2_close {
    position: absolute;
    z-index: 999;
    height: 100vh;
    width: 50%;
    z-index: 999;
    transition: transform 2.5s;
  }
  .openDoor1_open,
  .openDoor2_open {
    position: absolute;
    z-index: 999;
    height: 100vh;
    width: 50%;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 2.5s;
  }
  .openDoor1_open {
    left: 0px;
    transform: translateX(-100%);
  }
  .openDoor2_open {
    right: 0px;
    transform: translateX(100%);
  }
  .openBtn {
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    // left: 43%;
    top: 35%;
    height: 16rem;
    width: 16rem;
    transition: all 0.5s;
    background: url("../../assets/openbtn1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .loginArea {
    transform: translateY(60px);
    width: 20%;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    animation: loginMove ease-out 1s forwards;
  }
  @keyframes tip {
    0%{
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes loginMove {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
}
</style>
